<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>Blog Home Page</title>
<style type="text/css">
header,section,footer,aside,nav,article,figure,figcaption {
	display: block;
}

body {
	color: #666666;
	background-color: #f9f8f6;
	background-image: url("images/dark-wood.jpg");
	background-position:center; 
	font-family: Georgia, times, serif;
	line-height: 1.4em;
	background-position:right top;
}

.wrapper {
	width: 1000px;
	margin: 20px auto 20px auto;
	border: 2px solid #000000;
	background-color: #ffffff;
}

.video {
	
	width: 202px;
	height: 115px;
	background-color: #ddd;
	border: 1px solid #ccc;

	padding: 10px;
	margin-left: 2px;
}

header {
	height: 160px;
	background-image: url(images/header.jpg);
}

a { /*color: #666666;*/
	text-decoration: none;
}

a.title {
	color: #613D2D;
	text-decoration: none;
}

h1 {
	text-indent: -9999px;
	width: 940px;
	height: 130px;
	margin: 0px;
}

nav,footer {
	clear: both;
	color: #ffffff;
	background-color: #aeaca8;
	height: 30px;
}

nav ul {
	margin: 0px;
	padding: 5px 0px 5px 30px;
}

nav li {
	display: inline;
	margin-right: 40px;
}

nav li a {
	color: #ffffff;
}

nav li a:hover,nav li a.current {
	color: #000000;
}

section.articles {
	float: left;
	width: 690px;
	border-right: 1px solid #eeeeee;
}

section.popular-articles
{
	background-image: url("images/tag.jpg");
	background-size: 100% 100%;
}

section.contact-details
{
	background-image: url("images/EA_CONTACT.jpg");
	background-size: 100% 100%;
	width: 150px;
	height: 150px;
}

article {
	overflow: auto;
	width: 100%;
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;
	-moz-box-shadow: 1px 1px 1px 1px #ccc;
	-webkit-box-shadow: 1px 1px 1px 5px#ccc;
	box-shadow: 1px 1px 1px 1px #ccc;
	
	background-image: linear-gradient(rgba(247, 247, 247, 0.65098) 0%, rgba(247, 247, 247, 0.65098) 1%, rgba(209, 209, 209, 0.65098) 26%, rgba(0, 0, 0, 0) 100%);
}

hgroup {
	margin-top: 40px;
}

figure {
	float: left;
	width: 200px;
	height: 150px;
	padding: 15px;
	margin: 35px;
	border: 1px solid #eeeeee;
	background-color: #fff;
}

figcaption {
	font-size: 90%;
	text-align: left;
}

aside {
	width: 210px;
	float: left;
	padding: 0px 0px 0px 20px;
}

aside section {
	display: block;
	padding: 10px;
	border-bottom: 1px solid #eeeeee;
}

aside section a:hover {
	color: #985d6a;
	background-color: #efefef;
}

h1,h2,h3 {
	font-weight: normal;
}

h2 {
	margin: 10px 0px 5px 0px;
	padding: 0px;
}

h3 {
	margin: 0px 0px 10px 0px;
	color: #de6581;
}

aside h2 {
	padding: 30px 0px 10px 0px;
	color: #de6581;
}

footer {
	font-size: 80%;
	padding: 7px 0px 0px 20px;
}

a.read-more {
	color: rgb(244, 123, 166);
	font-size: 90%;
	font-family: Georgia, Times, serif;
	font-style: italic;
}

h3.user_name {
	font-size: 90%;
	color: rgb(243, 106, 152);
	font-style: italic;
}

p.author {
	font-style: italic;
}

h3.user_name {
	color: #017890;
}

a.read-more {
	color: #E95D22;
}

h2.log_in,h2.aside,h2.comments,h2.contact{
	color: #613D2D;
}

a.aside_h3 {
	font-size: 90%;
	color: #E95D22;
	font-style: italic;
}


</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
	<div class="wrapper">
		<header>
			<h1>Blog</h1>
			<nav>
				<ul>
					<li><a href="articles" class="current">home</a></li>
					<li><a href="#contact">contact</a></li>
				</ul>
			</nav>
		</header>
		<section class="articles">
			<c:forEach var="article" items="${articles}">
				<br/>
				<article >
					<figure>
						<c:choose>
							<c:when test="${not empty article.images }">
								<img class="article_image" src="${article.images.get(0).path }"
									width="194" height="146" />
								
							</c:when>
							<c:otherwise>
								<img class="article_image" src="images/default.jpg" width="194"
									height="146" />
							</c:otherwise>
						</c:choose>
					</figure>
					<hgroup>
						<h2>
							<a class="title" href="articles/${article.id}">${article.title }</a>
						</h2>
						<h3 class="user_name">
							By ${article.user.name } posted
							<fmt:formatDate value="${article.date }"
								pattern="yyyy-MM-dd HH:mm:ss" />
						</h3>
					</hgroup>
					<c:choose>
						<c:when test="${fn:length(article.content) > 150 }">
							<p>${fn:substring(article.content, 0, 150)}...</p>
						</c:when>
						<c:otherwise>
							<p>${article.content }</p>
						</c:otherwise>
					</c:choose>
					<p>
						<a class="read-more" href="articles/${article.id}">Read the
							Full Story</a> | <a class="read-more" href="articles/${article.id}"><span
							class="livefyre-commentcount" data-lf-site-id="296092"
							data-lf-article-id="20579317">${article.comments.size() }</span>&nbsp;Comments</a>
					</P>
					<c:choose>
						<c:when test="${article.editable == true }">
							<p>
								<a class="read-more" href="articles/${article.id}">Edit the Article</a>
							</p>
						</c:when>
					</c:choose>
				</article>
				<br />
				
			</c:forEach>
		</section>
		<aside>
		
		<br />
		<section> 
			<div class="video">
			<iframe width="200" height="113" src="http://www.youtube.com/embed/_3_719N2CJg?rel=0" frameborder="0" allowfullscreen></iframe>
			</div>
		</section>
			<section id="loginandout">
				<c:choose>
					<c:when test="${empty user }">
						<h2 class="log_in">log in</h2>
						<form action="validate" method="post">
							<p class="user_log">
								username:<input type="text" name="username" size="15"
									maxlength="30" />
							</p>
							<p class="user_log">
								password:<input type="password" name="password" size="15"
									maxlength="30" />
							</p>
							<input type="image" src="<%=basePath%>images/subscribe.jpg"
								width="100" height="20" />
						</form>
					</c:when>
					<c:otherwise>
						<h2 class="log_in">Welcome ${user.name }</h2>
						<p>
							<a class="aside_h3" href="articles/add">Post New Article</a>
						</p>
						<p>
							<a class="aside_h3" href="logout/${user.id }">log out</a>
						</p>
					</c:otherwise>
				</c:choose>
			</section>
			<section class="popular-articles" id="rank">
				<h2 class="aside">Popular Articles</h2>
				<c:forEach var="article" items="${topArticles}">
					<p>
						<a class="aside_h3" href="articles/${article.id}">${article.title }</a>
					</p>
				</c:forEach>
			</section>
			<section class="popular-comments" id="rank">
				<h2 class="comments">Recent Comments</h2>
				<c:forEach var="comment" items="${topComments}">
					<p>
						<a class="aside_h3" href="articles/${comment.article.id}">${fn:substring(comment.content,
							0, 50)}...</a>
					</p>
				</c:forEach>
			</section>
			<section class="contact-details" id="contact">
				
			</section>
		</aside>
		<footer> &copy; 2013 EA's Final Project: Blog </footer>
	</div>
	<!-- .wrapper -->
</body>
</html>